:root { --m1-pink:#f150a3; --m1-blue:#43c6f2; --m1-navy:#071522; --m1-panel:#0d2030; --m1-text:#f5f9fc; --m1-muted:#a9bdcb; }
body.m1-prototype-page { min-height:100vh; color:var(--m1-text); background:radial-gradient(circle at 72% 20%,rgba(67,198,242,.12),transparent 30%),radial-gradient(circle at 12% 48%,rgba(241,80,163,.13),transparent 27%),linear-gradient(180deg,#06111c,#091925 58%,#06111c); text-align:left; }
.m1-prototype-page button { margin-top:0; opacity:1; animation:none; box-shadow:none; }
.m1-shell { width:min(1420px,calc(100% - 38px)); margin:22px auto 72px; }
.m1-topbar { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:12px 4px 18px; border-bottom:1px solid rgba(67,198,242,.22); }
.m1-kicker,.stage-label,.reuben-label { margin:0 0 7px; color:var(--m1-pink); font-size:.76rem; font-style:normal; font-weight:900; letter-spacing:1.8px; }
.m1-topbar h1,.inspection-copy h2,.m1-question h2,.m1-complete h2 { margin:0; color:var(--m1-text); text-shadow:none; }
.m1-topbar h1 { font-size:clamp(1.7rem,3vw,2.6rem); }
.m1-tools,.view-switcher { display:flex; flex-wrap:wrap; gap:9px; }
.read-toggle,.hear-button,.view-switcher button { min-height:42px; padding:8px 16px; border:1px solid rgba(67,198,242,.35); border-radius:999px; color:var(--m1-text); background:#0b1d2b; font:800 .9rem/1.2 inherit; cursor:pointer; }
.read-toggle:hover,.hear-button:hover,.view-switcher button:hover { transform:none; border-color:var(--m1-pink); color:#fff; background:#132c3d; box-shadow:0 0 18px rgba(241,80,163,.18); }
.read-toggle[aria-pressed="true"],.view-switcher button.active { border-color:var(--m1-blue); color:#06111c; background:var(--m1-blue); }
.hear-button:disabled { opacity:.4; cursor:not-allowed; }
.m1-progress { padding:17px 4px 8px; }.m1-progress>div:first-child { display:flex; justify-content:space-between; color:var(--m1-muted); font-size:.9rem; }.m1-progress strong { color:#fff; }
.m1-progress-track { height:5px; margin:10px 0 15px; overflow:hidden; border-radius:99px; background:#1b3344; }.m1-progress-track span { display:block; width:11.11%; height:100%; background:linear-gradient(90deg,var(--m1-pink),var(--m1-blue)); }
.learning-path { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0; padding:0; list-style:none; }
.learning-path li { display:flex; align-items:center; justify-content:center; gap:8px; padding:9px; border:1px solid #183548; border-radius:10px; color:#7892a3; background:rgba(7,21,34,.72); font-size:.76rem; font-weight:900; letter-spacing:.8px; }
.learning-path li span { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:#173246; }.learning-path li.active { border-color:var(--m1-pink); color:#fff; background:rgba(241,80,163,.12); }.learning-path li.done { border-color:var(--m1-blue); color:#cceffc; background:rgba(67,198,242,.08); }.learning-path li.done span { color:#06111c; background:var(--m1-blue); }
.inspection-stage { position:relative; margin-top:8px; padding-top:16px; }
.inspection-copy { position:absolute; top:32px; left:24px; z-index:5; width:min(390px,40%); padding:18px 20px; border-left:3px solid var(--m1-pink); background:linear-gradient(90deg,rgba(6,17,28,.94),rgba(6,17,28,.62),transparent); }
.inspection-copy h2 { font-size:clamp(1.25rem,2.4vw,2rem); }.inspection-copy p:last-child { margin:8px 0 0; color:var(--m1-muted); font-size:.96rem; font-style:normal; line-height:1.5; }
.view-switcher { position:absolute; top:24px; right:20px; z-index:6; }
.learning-environment { position:relative; min-height:clamp(650px,75vh,900px); overflow:hidden; border-block:1px solid rgba(67,198,242,.13); background:radial-gradient(ellipse at 52% 47%,rgba(31,74,99,.55),rgba(7,21,34,.18) 48%,transparent 69%); }
.motorcycle-column { position:absolute; inset:0; display:grid; place-items:center; }.inspection-viewport { position:relative; width:min(76vh,850px,72vw); aspect-ratio:1; overflow:hidden; border:0; border-radius:50%; background:radial-gradient(circle,#fff 0 58%,#edf3f5 71%,transparent 72%); filter:drop-shadow(0 26px 34px rgba(0,0,0,.4)); }
.inspection-viewport::after { content:""; position:absolute; inset:3%; border:1px solid rgba(67,198,242,.34); border-radius:50%; pointer-events:none; }.inspection-viewport img { width:100%; height:100%; object-fit:contain; transform-origin:27% 72%; transition:transform .4s ease; }.inspection-viewport[data-view="focus"] img { transform:scale(1.95); }
.control-hotspot { --size:clamp(40px,4vw,56px); position:absolute; left:var(--x); top:var(--y); z-index:3; display:grid; place-items:center; box-sizing:border-box; width:var(--size); min-width:var(--size); height:var(--size); padding:0; transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; color:#fff; background:rgba(5,19,31,.84); box-shadow:0 0 0 3px var(--m1-blue),0 0 22px rgba(67,198,242,.45); font:900 1rem/1 inherit; cursor:pointer; transition:.2s ease; }
.control-hotspot:hover,.control-hotspot:focus-visible { transform:translate(-50%,-50%) scale(1.12); outline:5px solid rgba(241,80,163,.25); background:var(--m1-pink); box-shadow:0 0 0 3px #fff,0 0 28px rgba(241,80,163,.55); }
.inspection-viewport[data-view="focus"] .control-hotspot:not(.correct-hotspot) { opacity:.08; pointer-events:none; }.inspection-viewport[data-view="focus"] .correct-hotspot { left:34%; top:70%; }
.area-pointer { position:absolute; left:34%; top:70%; z-index:2; width:90px; height:90px; transform:translate(-50%,-50%); border:5px solid var(--m1-pink); border-radius:50%; opacity:0; pointer-events:none; }.area-pointer.show { opacity:1; animation:m1-pulse 1.3s infinite; }
@keyframes m1-pulse { 50% { box-shadow:0 0 0 22px rgba(241,80,163,0); transform:translate(-50%,-50%) scale(1.1); } }
.source-caption { position:absolute; left:50%; bottom:18px; z-index:4; width:min(720px,74%); margin:0; transform:translateX(-50%); color:#849dab; font-size:.74rem; font-style:normal; text-align:center; }
.source-caption[hidden], .source-caption [hidden] { display:none; }
.source-caption a { color:#b9cbd5; text-decoration:underline; }
.reuben-coach { position:absolute; right:0; bottom:0; z-index:5; width:min(310px,25vw); min-width:220px; }.reuben-coach:not([hidden]) { display:block; animation:reuben-in .3s ease both; }.reuben-coach>img { display:block; width:100%; max-height:520px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 15px 20px rgba(0,0,0,.45)); }
.reuben-bubble { position:absolute; right:90%; bottom:22%; width:250px; padding:16px 18px; border:1px solid var(--m1-blue); border-radius:16px 16px 3px 16px; background:rgba(8,30,44,.96); box-shadow:0 14px 32px rgba(0,0,0,.38); }.reuben-bubble p { margin:0; color:#eaf7ff; font-size:.9rem; font-style:normal; line-height:1.45; }.reuben-bubble .reuben-label { margin-bottom:7px; color:var(--m1-pink); font-size:.7rem; }
@keyframes reuben-in { from { opacity:0; transform:translateX(24px); } }
.stage-feedback { min-height:28px; margin:12px 0 0; color:var(--m1-muted); text-align:center; font-style:normal; font-weight:800; }.stage-feedback.good { color:#5fe0ad; }.stage-feedback.coach { color:#ff88c0; }
.m1-question,.m1-complete { width:min(860px,calc(100% - 28px)); margin:24px auto 0; padding:30px; border:1px solid rgba(67,198,242,.2); border-radius:18px; background:linear-gradient(135deg,rgba(13,32,48,.92),rgba(8,24,36,.92)); box-shadow:0 18px 50px rgba(0,0,0,.2); text-align:center; }
.m1-question h2,.m1-complete h2 { font-size:clamp(1.35rem,2.4vw,2rem); }.m1-options { display:grid; gap:10px; margin-top:21px; }.m1-options button { min-height:54px; padding:12px 18px; border:1px solid #29485c; border-radius:11px; color:#eaf4fa; background:#0a1926; font:700 1rem/1.3 inherit; cursor:pointer; }.m1-options button:hover { transform:none; border-color:var(--m1-blue); color:#fff; background:#102b3d; box-shadow:none; }.m1-options button.correct { border-color:#25bd85; color:#dfffee; background:#0e382d; }.m1-options button.wrong { border-color:var(--m1-pink); color:#ffd7ea; background:#3a1429; }
.question-note { color:var(--m1-muted); font-style:normal; }.gear-practice { margin-top:22px; }.gear-pattern { display:flex; align-items:end; justify-content:center; gap:10px; margin:0 auto 20px; color:var(--m1-muted); }.gear-step { display:grid; justify-items:center; gap:5px; min-width:76px; }.gear-direction { color:#d4e7f1; font-size:.76rem; font-weight:900; white-space:nowrap; }.gear-number { display:grid; place-items:center; width:46px; height:46px; border:2px solid var(--m1-blue); border-radius:50%; color:#06111c; background:var(--m1-blue); font-size:1.05rem; font-weight:900; }.gear-number.neutral { color:var(--m1-text); background:transparent; }.gear-line { width:30px; height:2px; margin-bottom:22px; background:#426174; }.gear-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.gear-actions button { display:grid; grid-template-columns:32px 1fr; grid-template-rows:auto auto; align-items:center; min-height:70px; padding:10px 14px; border:1px solid #29485c; border-radius:11px; color:#eaf4fa; background:#0a1926; font:inherit; text-align:left; cursor:pointer; }.gear-actions button:hover,.gear-actions button:focus-visible { border-color:var(--m1-blue); background:#102b3d; }.gear-actions button.complete { border-color:#25bd85; background:#0e382d; }.gear-actions button span { grid-row:1 / span 2; color:var(--m1-pink); font-size:1.7rem; text-align:center; }.gear-actions button strong,.gear-actions button small { display:block; }.gear-actions button small { margin-top:2px; color:var(--m1-muted); font-size:.78rem; }.m1-complete:not([hidden]) { display:grid; grid-template-columns:210px 1fr; align-items:end; gap:28px; text-align:left; }.m1-complete img { width:100%; max-height:280px; object-fit:contain; }.m1-complete p { color:var(--m1-muted); font-style:normal; }.m1-complete .dashboard-button { display:inline-flex; margin-top:10px; }
@media (max-width:1050px) { .reuben-coach { width:230px; }.reuben-bubble { right:72%; bottom:15%; width:220px; }.inspection-copy { width:330px; }.inspection-viewport { width:min(72vh,72vw); } }
@media (max-width:760px) { .m1-shell { width:min(100% - 18px,1420px); margin-top:8px; }.m1-topbar { align-items:flex-start; flex-direction:column; }.learning-path li { flex-direction:column; font-size:.68rem; }.inspection-stage { padding-top:8px; }.inspection-copy { position:relative; inset:auto; width:auto; margin-bottom:10px; padding:14px 16px; }.view-switcher { position:relative; inset:auto; justify-content:center; margin-bottom:8px; }.learning-environment { min-height:620px; }.inspection-viewport { width:min(94vw,590px); }.reuben-coach { right:-18px; width:200px; min-width:0; }.reuben-bubble { right:62%; bottom:8%; width:190px; }.source-caption { bottom:8px; width:92%; }.m1-complete:not([hidden]) { grid-template-columns:140px 1fr; } }
@media (max-width:480px) { .m1-tools { width:100%; }.read-toggle,.hear-button { flex:1; padding-inline:10px; }.learning-environment { min-height:520px; }.reuben-coach { width:145px; }.reuben-bubble { right:58%; bottom:4%; width:180px; padding:12px; }.reuben-bubble p { font-size:.78rem; }.source-caption { font-size:.64rem; }.m1-question { padding:23px 15px; }.gear-actions { grid-template-columns:1fr; }.m1-complete:not([hidden]) { grid-template-columns:1fr; text-align:center; }.m1-complete img { width:170px; margin:auto; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }

/* M1 licensed 3D walk-around */
.motorcycle-column model-viewer { display:block; width:100%; height:100%; min-height:clamp(650px,75vh,900px); background:radial-gradient(circle at 50% 54%,#17394d 0,#0c2434 38%,#071522 72%); --poster-color:transparent; --progress-bar-color:var(--m1-pink); --progress-bar-height:4px; }
.model-loading { position:absolute; inset:0; z-index:8; display:grid; place-content:center; justify-items:center; gap:10px; color:#eefaff; text-align:center; background:radial-gradient(circle,#102d40,#071522 67%); }
.model-loading[hidden] { display:none; }
.model-loading span { width:48px; height:48px; border:4px solid rgba(67,198,242,.2); border-top-color:var(--m1-pink); border-radius:50%; animation:m1-load 1s linear infinite; }
.model-loading small { color:var(--m1-muted); }
@keyframes m1-load { to { transform:rotate(360deg); } }
.model-load-error { width:min(440px,80%); margin:auto; padding:24px; border:1px solid var(--m1-pink); border-radius:16px; color:#fff; background:#0b1d2b; text-align:center; }
.model-fallback-image { width:100%; height:100%; object-fit:contain; }
.orbit-help { position:absolute; left:50%; bottom:48px; z-index:5; display:flex; gap:18px; margin:0; padding:8px 14px; transform:translateX(-50%); border:1px solid rgba(67,198,242,.24); border-radius:999px; color:#b9d7e7; background:rgba(4,15,24,.78); font-size:.76rem; font-style:normal; pointer-events:none; }
.model-hotspot { display:grid; place-items:center; width:88px; min-width:88px; height:88px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.model-hotspot span { visibility:hidden; }
.model-hotspot span:first-child { width:22px; height:22px; border:3px solid #fff; border-radius:50%; }
.model-hotspot .hotspot-label { position:absolute; left:50%; top:calc(100% + 8px); min-width:105px; padding:7px 10px; transform:translateX(-50%); border-radius:9px; color:#06111c; background:#fff; font-size:.76rem; font-weight:900; white-space:nowrap; }
.model-hotspot.hint-visible,.model-hotspot.identified { opacity:1; box-shadow:0 0 0 7px rgba(241,80,163,.18),0 0 28px rgba(241,80,163,.8); animation:m1-hotspot 1.4s ease-in-out infinite; }
.model-hotspot.hint-visible,.model-hotspot.identified { background:var(--m1-pink); }
.model-hotspot.hint-visible span,.model-hotspot.identified span { visibility:visible; }
.model-hotspot.identified { background:transparent; box-shadow:none; animation:none; }
.model-hotspot.identified span:first-child { visibility:visible; border-color:#fff; background:#3ee0a1; box-shadow:0 0 0 7px rgba(62,224,161,.18),0 0 28px rgba(62,224,161,.7); }
.m1-prototype-page .model-hotspot:not(.hint-visible):not(.identified) { cursor:default; outline:none; }
.m1-prototype-page .model-hotspot:not(.hint-visible):not(.identified):hover,
.m1-prototype-page .model-hotspot:not(.hint-visible):not(.identified):focus { transform:none; background:transparent; box-shadow:none; }
.search-zone { display:none; width:154px; height:154px; box-sizing:border-box; border:2px dashed rgba(241,80,163,.78); border-radius:50%; background:rgba(241,80,163,.08); pointer-events:none; }
.search-zone.visible { display:block; animation:m1-search-zone 1.8s ease-in-out infinite; }
@keyframes m1-search-zone { 50% { transform:scale(1.06); box-shadow:0 0 0 10px rgba(241,80,163,.08); } }
@keyframes m1-hotspot { 50% { transform:scale(1.16); } }
.model-is-ready .inspection-copy { pointer-events:none; }
@media (max-width:760px) { .motorcycle-column model-viewer { min-height:620px; }.orbit-help { bottom:42px; width:max-content; max-width:88%; flex-wrap:wrap; justify-content:center; gap:5px 13px; border-radius:14px; }.model-hotspot { width:88px; min-width:88px; height:88px; }.search-zone { width:140px; height:140px; } }
@media (max-width:480px) { .view-switcher { width:100%; gap:5px; padding-inline:4px; }.view-switcher button { flex:1; min-width:0; padding-inline:7px; font-size:.76rem; white-space:nowrap; }.motorcycle-column model-viewer { min-height:520px; }.orbit-help { bottom:38px; font-size:.68rem; } }

/* 12 Oct 2026: hint must not cover the control. Show a pink ring with a clear centre instead of a filled circle. */
.model-hotspot.hint-visible { background:transparent; box-shadow:none; animation:none; }
.model-hotspot.hint-visible span:first-child { width:30px; height:30px; border:4px solid var(--m1-pink); background:transparent; box-shadow:0 0 0 3px #fff,0 0 18px rgba(241,80,163,.9); animation:m1-hint-ring 1.4s ease-in-out infinite; }
@keyframes m1-hint-ring { 50% { transform:scale(1.25); } }
.search-zone { width:120px; height:120px; }
@media (max-width:760px) { .model-hotspot { width:64px; min-width:64px; height:64px; }.search-zone { width:96px; height:96px; } }

/* 12 Oct 2026: Remember-it card and exam-style numbered picture */
.remember-card { margin-top:22px; padding:20px; border:1px solid rgba(62,224,161,.45); border-radius:18px; background:rgba(62,224,161,.07); text-align:center; }
.remember-card h3 { margin:6px 0 14px; font-size:1.1rem; }
.remember-line { margin:14px auto; max-width:520px; font-size:1.05rem; font-weight:800; line-height:1.45; }
.numbered-diagram { position:relative; width:min(100%,340px); margin:0 auto; border-radius:14px; overflow:hidden; background:#fff; }
.numbered-diagram img { display:block; width:100%; height:auto; }
.diagram-ring { position:absolute; width:16%; aspect-ratio:1; transform:translate(-50%,-50%); border:4px solid var(--m1-pink,#f150a3); border-radius:50%; box-shadow:0 0 0 3px #fff,0 0 16px rgba(241,80,163,.9); animation:m1-hint-ring 1.4s ease-in-out infinite; pointer-events:none; }
.exam-block { margin:14px 0; }
.exam-numbers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; max-width:420px; margin-inline:auto; }
.exam-numbers button { font-size:1.4rem; font-weight:900; padding:14px 0; }

/* 12 Oct 2026: Reuben stands on the LEFT so his pointing hand (right hand) points towards the motorcycle. */
.reuben-coach { right:auto; left:0; }
.reuben-bubble { right:auto; left:90%; border-radius:16px 16px 16px 3px; }
@media (max-width:1050px) { .reuben-bubble { right:auto; left:72%; } }
@media (max-width:760px) { .reuben-coach { right:auto; left:-18px; }.reuben-bubble { right:auto; left:62%; } }
@media (max-width:480px) { .reuben-bubble { right:auto; left:58%; } }
.diagram-ring.small { width:9.5%; border-width:3px; box-shadow:0 0 0 2px #fff,0 0 10px rgba(241,80,163,.8); animation:none; }